<template>
    <div class="bigDiv"> 
      <el-form :inline="true" :model="params" ref="form">
        <el-row>
              <div class="topNav">
                  <el-button icon="el-icon-plus" type="text" @click="insertEvent">新增</el-button>
                  <el-button type="text" icon="el-icon-refresh-right" style="float:right;" @click="resetForm('form')">重置</el-button>
                  <el-button type="text" icon="el-icon-search" @click="getConfigList" style="float:right;">查询</el-button>
              </div>
            <div style="margin:0 20px;">
                <el-form-item label="配置类型" style="margin-bottom:0px">
                  <el-select v-model="params.dictionaryKey1" size="mini" clearable>
                    <el-option
                      v-for="item in dictionaryKey1Filter"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="商品类型" style="margin-bottom:0px">
                  <el-select v-model="params.dictionaryKey2" size="mini" clearable>
                    <el-option
                      v-for="item in dictionaryKey2Filter"
                      :key="item.value"
                      :label="item.text"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="状态" style="margin-bottom:0px">
                  <el-select v-model="params.status" size="mini" clearable>
                    <el-option
                      v-for="item in configStatusFilter"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
            </div>
        </el-row>
      </el-form> 
      <el-table
          border
          :data="tableData"
          :max-height="maxHeightNow"
       >
        <el-table-column prop="dictionaryKey1" fixed="left" width="150" label="配置类型">
          <template slot-scope="scope">
            <span>{{configFilter[scope.row.dictionaryKey1]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dictionaryKey2" label="商品类型" width="150">
          <template slot-scope="scope">
            <span>{{goodsSource[scope.row.dictionaryKey2]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dictionaryKey3" label="系统名称" width="150"></el-table-column>
        <el-table-column prop="optional2" align="center" width="150" label="商品状态">
          <template slot-scope="scope">  
            <el-select v-model="scope.row.optional2" size="small" placeholder="请选择商品状态" @change="changeGoodsState(scope.row)"> 
              <el-option label="上架" value="PASS"></el-option>
							<el-option label="可见不可售" value="PASS_DIS"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="status" align="center" label="状态">
          <template slot-scope="scope">
            <span>{{configStatus[scope.row.status]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="describe_" label="备注" width="200">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.describe_" placement="bottom" effect="dark" class="goodsNameBox">
              <div>{{ scope.row.describe_ }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="" label="创建人">
          <template slot-scope="scope">
            <span>{{scope.row.createUserName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" align="right" label="创建时间" width="160">
          <template slot-scope="scope">
            <span>{{scope.row.createTime| formeTime}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="更新人">
          <template slot-scope="scope">
            <span>{{scope.row.updateUserName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop=""  align="right" label="更新时间" width="160">
          <template slot-scope="scope">
            <span>{{scope.row.updateTime| formeTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          width="150">
          <template slot-scope="scope"> 
           <div v-if="scope.row.dictionaryKey1 !== 'default_goods_state'">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="editorEvent(scope.row)">编辑
            </el-button>
            <el-button size="mini" class="fc-red" type="text" icon="el-icon-delete" @click="deleteEvent(scope.row)">移除
            </el-button> 
           </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total=totalPage>
      </el-pagination>
   
      <el-dialog
          :title="arrDialogTitle[dialogType]"
          :visible.sync="dialogVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          width="60%"
          :before-close="handleClose">
        <el-form ref="configForm" :model="configForm" label-width="80px" :rules="rules">
          <el-form-item label="配置类型" prop="dictionaryKey1">
            <el-select v-model="configForm.dictionaryKey1" size="mini" clearable>
              <el-option label="外部系统" value="client_code"></el-option>
							<el-option label="商品类型" value="goods_source"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品类型" prop="dictionaryKey2">
            <el-select v-model="configForm.dictionaryKey2" size="mini" clearable>
              <el-option
                v-for="item in dictionaryKey2Filter"
                :key="item.value"
                :label="item.text"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="系统名称" prop="dictionaryKey3">
            <el-input v-model="configForm.dictionaryKey3"/>
          </el-form-item>
          <el-form-item label="商品状态" prop="optional2">
            <el-select v-model="configForm.optional2" placeholder="请选择商品状态"> 
              <el-option label="上架" value="PASS"></el-option>
							<el-option label="可见不可售" value="PASS_DIS"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="configForm.status" placeholder="请选择状态"> 
              <el-option label="有效 " value="1"></el-option>
							<el-option label="无效" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述" prop="describe_">
            <el-input type="textarea" v-model="configForm.describe_" placeholder="请输入描述" maxlength="200" show-word-limit></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogSubmit('configForm')">确 定</el-button>
      </span>
      </el-dialog>
    </div> 
  </template>
  
  <script>
  import { configListApi, insertConfigApi, updateConfigApi, deleteConfigApi} from "@/api/itemPoolApi"; 
    import moment from "moment";
    export default {
      name: 'goodsState',
      components: {},
      data() {
        return {
          configStatus: {
            "1": "有效",
            "0": "无效"
          },
          configFilter: {
            "client_code": "外部系统",
            "default_goods_state": "商品默认状态",
            "goods_source": "商品类型"
          },
          dictionaryKey1Filter: [
            {
                code: "client_code",
                name: "外部系统"
            },
            {
                code: "default_goods_state",
                name: "商品默认状态"
            },
            {
                code: "goods_source",
                name: "商品类型"
            }
          ],
          goodsState: {
            "PASS": "上架",
            "PASS_DIS": "可见不可售"
          },
          goodsSource: this.$config.goodsSource,
          dictionaryKey2Filter: this.$config.goodsSourceFilters,
          configStatusFilter: [
            {
                code: "1",
                name: "有效"
            },
            {
                code: "0",
                name: "无效"
            },
          ],
          params: {
            pageNum: 1,
            pageSize: 10,
            dictionaryType: "goods_state", 
            dictionaryKey1: null,
            dictionaryKey2: null,
            status: null
          },
          totalPage:0, 
          // 表格数据
          tableData: [],  
          dialogVisible: false,
          arrDialogTitle: ['新增配置','编辑配置'],
          dialogType:0, // 0 新增， 1编辑
          configForm: {
              status: "1",
              dictionaryType: "goods_state", 
          },
          rules:{
            dictionaryKey1:[{ required: true, message: '请选择配置类型', trigger: 'change' }],
            dictionaryKey2:[{ required: true, message: '请选择商品类型', trigger: 'change' }],
            optional2:[{ required: true, message: '请选择商品状态', trigger: 'change' }]
          },
        }
      },
      watch: { 
      },
      filters: {
        formeTime(val){
          return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ' '
        }
      },
      computed: { 
        // 表格高度
        maxHeightNow () {
          const height = window.innerHeight
          return height -  300
        }
      },
      created() { 
        this.getConfigList();
      },
      mounted() { 
      },
    methods: {
        getConfigList() { 
          configListApi(this.params).then(res => {
              this.tableData = res.rows;
              this.totalPage = res.total;
          })
        },    
        searchEvent (value) {
          if (!value) {
            this.params = {}
          }
        }, 
        resetForm(formName) {
          this.params = {
            pageNum: 1,
            pageSize: 10,
            dictionaryType: "goods_state", 
            dictionaryKey1: null,
            dictionaryKey2: null,
            status: null
          };
          this.$refs[formName].resetFields();
          this.getConfigList();
        },
        // 每页显示条数
        handleSizeChange(val) {
          this.params.pageSize = val
          // 查询角色列表
          this.getConfigList ()
        },
        // 当前页
        handleCurrentChange(val) {
          this.params.pageNum = val
          // 查询角色列表
          this.getConfigList ()
        },
        // 关闭弹窗
        handleClose(done) { 
          done();
        }, 
        changeGoodsState(row) {  
          updateConfigApi(row).then(() => {
              this.$message({
                type: 'success',
                message: '编辑成功!'
              });
              // 查询角色列表
              this.getConfigList ()
              this.dialogVisible = false
            })
        },
        insertEvent () {
          this.configForm = {
            status: "1",
            dictionaryType: "goods_state", 
          } 
          this.dialogVisible = true;
          this.dialogType = 0;
        },
        editorEvent (row) {
          this.dialogVisible = true;
          this.dialogType = 1;
          this.configForm = row;
        },
        deleteEvent (row) {
          this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteConfigApi(row.id).then(res=>{
              this.$message({
                type: 'success',
                message: '删除成功!'
              }); 
              this.getConfigList ()
            })
  
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        },
        initResource (obj,self) {
          if('children' in obj) {
            obj.children.forEach(item=>{
              item['visible'] = false
              self.initResource(item,self)
            })
          }
        }, 
        // 提交表单
        dialogSubmit (formName) {
          // 验证表单
          this.$refs[formName].validate((valid) => {
            if (!valid) {
              return false
            }
          }) 
          if (this.dialogType === 0) {
            insertConfigApi(this.configForm).then(res => {
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              // 查询角色列表
              this.getConfigList();
              this.dialogVisible = false;
            })
          }
          // 编辑角色
          if (this.dialogType === 1 ) {
            updateConfigApi(this.configForm).then(res => {
              this.$message({
                type: 'success',
                message: '编辑成功!'
              });
              // 查询角色列表
              this.getConfigList ()
              this.dialogVisible = false
            })
          }
        },  
      }
    }
  </script>
  
  <style scoped lang="scss">   
  
    ::v-deep.el-dialog{
      display: flex;
      flex-direction: column;
      margin:0 !important;
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      max-width:calc(100% - 30px);
    }
   
    ::v-deep.el-button--text.fc-red{
      color: red !important;
    }
  </style>
  